<template>
	<!-- 查看房间预约详情 -->
	<div>
		<h2>查看房间预约详情</h2>
		<div class="table">
			<el-table :data="tableData" ref="multipleTable" stripe>
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column
					prop="customerRoomAppTimeScope"
					label="预约时间段"
					align="center"
				></el-table-column>
				<el-table-column
					prop="customerRoomAppApprover"
					label="预约人"
					align="center"
				></el-table-column>
				<el-table-column prop="isAgreed" label="审核" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.agree == 2" style="font-weight: bold; color: green">同意</span>
						<span v-else-if="scope.row.agree == 0" style="font-weight: bold">待审核</span>
						<span v-else-if="scope.row.agree == 3" style="font-weight: bold; color: red">拒绝</span>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button
							:plain="true"
							@click="handleClick(scope.row)"
							type="text"
							size="small"
							align="center"
						>
							查看预约详情
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页pagination -->
		<div class="pagination" align="center">
			<el-pagination
				small
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="page.currentPage"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="page.total"
			></el-pagination>
		</div>
		<!-- 弹出框 -->
		<el-dialog title="查看详情" :visible.sync="dialogFormVisible" width="20%">
			<el-form v-for="(item, index) in tableData" :key="index">
				<el-form-item label="场馆：" :label-width="formLabelWidth">
					{{ item.customerRoomAppName }}
				</el-form-item>
				<el-form-item label="预约时间：" :label-width="formLabelWidth">
					{{ item.customerRoomAppDate }} / {{ item.customerRoomAppTimeScope }}
				</el-form-item>
				<el-form-item label="预约人：" :label-width="formLabelWidth">
					{{ item.customerRoomAppUsername }}
				</el-form-item>
				<el-form-item label="场馆审批人：" :label-width="formLabelWidth">
					{{ item.customerRoomAppApprover }}
				</el-form-item>
				<el-form-item label="选择设备：" :label-width="formLabelWidth">
					{{ item.customerRoomAppEquipment }}
				</el-form-item>
				<el-form-item label="备注：" :label-width="formLabelWidth">
					<el-input
						type="textarea"
						v-model="item.customerRoomAppRemark"
						autocomplete="off"
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { appoinmentCustomerRoomsList } from '@/APIs/index/index'
export default {
	name: 'ViewAppointment',
	data() {
		return {
			list: [],
			tableData: [],
			page: {
				currentPage: 1,
				pageSize: 10,
				total: 0
			},
			venuesDetailsList: [],
			dialogFormVisible: false,
			formLabelWidth: '120px',
			form: {
				name: '',
				region: '',
				date1: '',
				date2: '',
				delivery: false,
				type: [],
				resource: '',
				desc: ''
			}
		}
	},
	created() {},
	mounted() {
		this.ViewAppointment()
		console.log(this.tableData)
	},
	methods: {
		// 页面加载完成直接渲染已预约数据到表格
		async ViewAppointment() {
			const roomAppId = this.$route.query.roomAppId
			const roomAppTimeId = this.$route.query.roomAppTimeId
			const data = await appoinmentCustomerRoomsList({
				roomAppId,
				roomAppTimeId
			})
			// console.log(data.data.list)
			for (let i = 0; i < data.data.list.length; i++) {
				this.tableData.push({
					agree: data.data.list[i].agree, //
					customerRoomAppCreateTime: data.data.list[i].customerRoomAppCreateTime, // 发起时间
					customerRoomAppEquipment: data.data.list[i].customerRoomAppEquipment, // 事物
					customerRoomAppName: data.data.list[i].customerRoomAppName, // 类型
					customerRoomAppStatus: data.data.list[i].customerRoomAppStatus, // 状态
					customerRoomAppApprover: data.data.list[i].customerRoomAppApprover, // 审核人
					customerRoomAppDate: data.data.list[i].customerRoomAppDate, // 预约日期
					customerRoomAppRemark: data.data.list[i].customerRoomAppRemark, // 备注
					customerRoomAppTimeScope: data.data.list[i].customerRoomAppTimeScope, // 预约时间段
					customerRoomAppUsername: data.data.list[i].customerRoomAppUsername // 预约人
				})
			}
			// console.log(this.tableData)
		},
		handleClick(row) {
			this.dialogFormVisible = true
			console.log(row)
		},
		// 点击下一页
		async handleCurrentChange(val) {
			this.page.currentPage = val
			// const { currentPage: pageNum, pageSize } = this.page
			// const {
			// 	data: { list = [], total }
			// } = await appoinmentCustomerRoomsList({
			// 	pageNum,
			// 	pageSize
			// })
			// this.tableData = list.map(item => ({ ...item, visible: false }))
			// this.venuesDetailsList = list
			// this.page.total = total
			// console.log(list, total)
		},
		handleSizeChange() {}
	}
}
</script>

<style>
.table {
	margin-bottom: 15px;
}
</style>